<template lang="html">
  <div class="hotelOrderBox">
    <p class="txt1 text-left">【9.9元，红酒小镇水上乐园 】耍水的超棒打开方式！来美心水上乐园一次告别酷暑夏天！</p>
    <p class="txt2 gray text-left">上架时间 2017-05-01 13:45:48</p>
    <el-row style="margin-top:10px;">
      <el-col :span="5" style="margin-right:10px;">
        <p class="gray text-left">房型</p>
      </el-col>
      <el-col :span="6">
        <p class="gray text-left">日期</p>
      </el-col>
      <el-col :span="3"  style="padding-left:10px;">
        <p class="gray text-left">总量</p>
      </el-col>
      <el-col :span="4">
        <p class="gray text-left">已预约</p>
      </el-col>
      <el-col :span="4">
        <p class="gray text-left">批量设置</p>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;">
      <el-col :span="5" style="border:1px solid #DDDDDD; border-radius:5px; margin-right:10px;">
        <ul class="listBox">
          <li>豪华双床房</li>
          <li>豪华大床房</li>
        </ul>
      </el-col>
      <el-col :span="6" style="border:1px solid #DDDDDD; border-right:0px; padding:5px; height:200px; border-radius:5px 0 0 5px;">
         <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
           <el-checkbox class="check txt2" v-for="item in checkList" :label="item" :key="item">{{item}}</el-checkbox>
         </el-checkbox-group>
      </el-col>
      <el-col :span="3" style="height:200px; padding:5px 5px 5px 10px; border-bottom:1px solid #DDDDDD; border-top:1px solid #DDDDDD;">
        <el-input size="mini"></el-input>
        <el-input class="text1" size="mini"></el-input>
        <el-input class="text1" size="mini"></el-input>
        <el-input class="text1" size="mini"></el-input>
      </el-col>
      <el-col :span="4" style="height:200px; padding:5px; border:1px solid #DDDDDD; border-left:0px;">
        <p class="green text-left" style="line-height:26px; font-size:13px;">15</p>
      </el-col>
      <el-col :span="4" style="height:200px; padding:5px; border:1px solid #DDDDDD; border-left:0px; border-radius:0 5px 5px 0;">
        <el-input size="mini"></el-input>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;">
      <el-col :span="2" :offset="20">
        <el-button size="small" type="success">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data (){
    return {
      checkedCities:['2017年12月5日－周四'],
      checkList:['2017年12月5日－周四','2017年12月6日－周五','2017年12月7日－周六','2017年12月8日－周日']
    }
  },
  methods:{
    handleCheckedCitiesChange:function (){

    }
  }
}
</script>

<style lang="Sass" >
  .hotelOrderBox{

    .listBox{ list-style: none; padding: 5px; height: 200px; box-sizing: border-box;
      li{text-align: left; line-height: 30px; border-bottom: 1px solid #DDDDDD; font-size: 12px;}
    }
    .el-checkbox+.el-checkbox{margin-left: 0;}
    .txt1{ font-size: 13px; }
    .txt2{ font-size: 12px;
      span{font-size: 13px; line-height: 26px;}
    }
    .text1{ margin-top: 5px;}
  }
</style>
